<template>
	<view class="reason">
		<view class="header">救援完成，请填写困人原因</view>
		<view class="content">
			<view class="faultContent">
				<view class="faultItem" style="margin-bottom: 52rpx;">
					<view class="name">
						电梯状态
						<text style="color: red;">*</text>
					</view>
					<view class="reasonContent">
						<view :class="faultReasonItem.isStop==1? 'active' : ''"
							@click="faultReasonItem.isStop=1">
							正常运行
						</view>
						<view :class="faultReasonItem.isStop==2? 'active' : ''"
							@click="faultReasonItem.isStop=2">
							停梯
						</view>
					</view>
			 
				</view>
				<view class="faultItem" style="margin-bottom: 52rpx;">
					<view class="name">
						困人原因
						<text style="color: red;">*</text>
					</view>
					<view class="reasonContent">
						<view v-for="(item, index) in list" :key="index"
							:class="faultReasonItem.stopReason.includes(item.dictKey) ? 'active' : ''"
							@click="chooseItem(item, index)">
							{{ item.dictValue }}
						</view>
					</view>
					<input type="text" v-if="faultReasonItem.stopReasonValue.includes('其他')" placeholder="请输入其他故障原因"
						class="other" maxlength="20" v-model="stopReasonRemark" />
				</view>
				<view class="faultItem">
					<view class="name">
						故障说明
						<text>(选填)</text>
					</view>
					<view class="area">
						<textarea v-model="stopReasonDesc" placeholder="请输入故障内容" placeholder-class="textare"
							style="font-size: 28rpx;height:150rpx;width: 100%;" maxlength="300" :always-embed="true" />
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="cancle" @click="cancle">取消</view>
			<view class="comfire" @click="confirem">确认</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		list: {
			type: Array
		},
	},
	data() {
		return {
			faultReasonItem: {
				isStop:'',
				stopReason: [],
				stopReasonValue: []
			},
			stopReasonRemark: '',
			stopReasonDesc: '',
			selectIdx: ''
		};
	},
	watch: {
		// faultReasonItem: {
		// 	deep: true,
		// 	handler(newVal, oldVal) {
		// 		if (!newVal.includes(this.otherId)) {
		// 			this.faultReasonOtherDesc = ''
		// 		}
		// 	}
		// }
	},
	created() {
		// this.otherId=this.list.find(item=>{
		// 	item.dictValue==='其他'
		// })
		// console.log(this.otherId,5555)
	},
	methods: {
		cancle() {
			this.$emit('cancle');
		},
		clearData() {
			this.faultReasonItem.stopReason = [];
			this.faultReasonItem.stopReasonValue = [];
			this.stopReasonRemark = '';
			this.stopReasonDesc = '';
		},
		confirem() {
			let str;
			console.log(this.faultReasonItem, '确认');
			if (!this.faultReasonItem.isStop) {
				str = '请选择电梯状态';
				uni.showToast({
					title: str,
					icon: 'none'
				});
				return false;
			}
			if (this.faultReasonItem.stopReasonValue.length == 0) {
				str = '请选择困人原因';
				uni.showToast({
					title: str,
					icon: 'none'
				});
				return false;
			}
			if (this.faultReasonItem.stopReasonValue.includes('其他')) {
				if (!this.stopReasonRemark) {
					str = '请填写其他困人原因';
					uni.showToast({
						title: str,
						icon: 'none'
					});
					return false;
				}
			}
			const params = {
				isStop:this.faultReasonItem.isStop,
				stopReason: this.faultReasonItem.stopReason.join(','),
				stopReasonValue: this.faultReasonItem.stopReasonValue.join(','),
				stopReasonRemark: this.stopReasonRemark,
				stopReasonDesc: this.stopReasonDesc
			};

			this.$emit('comfire', params);
		},
		chooseItem(item, index) {
			if (!this.faultReasonItem.stopReason.includes(item.dictKey)) {
				this.faultReasonItem.stopReason.push(item.dictKey);
				this.faultReasonItem.stopReasonValue.push(item.dictValue);
			} else {
				let faultIndex = this.faultReasonItem.stopReason.findIndex(e => e == item.dictKey);
				this.faultReasonItem.stopReason.splice(faultIndex, 1);
				this.faultReasonItem.stopReasonValue.splice(faultIndex, 1);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.reason {
	width: 615rpx;
	// height: 670rpx;
	background-color: #fff;
	border-radius: 16rpx;
	position: relative;

	.header {
		padding-top: 40rpx;
		padding-bottom: 20rpx;
		display: flex;
		justify-content: center;
		font-size: 30rpx;
		font-weight: 500;
	}
}

.content {
	padding: 0 28rpx;

	.faultContent {
		.faultItem {
			.name {
				font-size: 26rpx;
				color: #333;
				font-weight: 500;

				text {
					color: #999;
				}
			}

			.area {
				border: 2rpx solid #e9e9e9;
				padding: 20rpx;
				margin-top: 20rpx;
			}

			.reasonContent {
				// margin-bottom: 52rpx;
				display: flex;
				flex-wrap: wrap;

				view {
					padding: 4rpx 24rpx;
					border-radius: 8rpx;
					margin-top: 24rpx;
					margin-right: 20rpx;
					color: #666666;
					border: 2rpx solid #cccccc;
				}

				.active {
					color: #0091ff;
					border-color: #0091ff;
				}
			}

			.other {
				width: 100%;
				height: 80rpx;
				border: 2rpx solid #e9e9e9;
				border-radius: 4rpx;
				padding-left: 28rpx;
				box-sizing: border-box;
				margin-top: 24rpx;
			}
		}
	}
}

.bottom {
	border-top: 2rpx solid #e9e9e9;
	margin-top: 18rpx;
	// position: fixed;
	// bottom: 0;
	display: flex;

	view {
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: center;
		height: 80rpx;
		font-size: 28rpx;
	}

	.cancle {
		color: #999999;
		border-right: 2rpx solid #f5f5f5;
	}

	.comfire {
		color: #0091ff;
	}
}
</style>
